import 'package:flutter/material.dart';

import 'EditPassword.dart';
import 'MainPage.dart';
import 'Register.dart';
import 'SecondScreen.dart';

class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Size size = MediaQuery.of(context).size;
    //Scaffold是Material中主要的布局组件.
    return new Scaffold(
      body: ListView(
        children: <Widget>[
          Container(
            child: Image.asset(
              'image/yhb.png',
              height: 100.0,
            ),
            padding: const EdgeInsets.only(top: 50.0, bottom: 20.0),
          ),
          TextField(
            keyboardType: TextInputType.phone,
            maxLines: 1,
            autofocus: false,
            cursorColor: Colors.blue,
            maxLength: 11,
            // maxLengthEnforced: true,
            // focusNode: phoneFocusNode,
            decoration: InputDecoration(
              hintText: "请输入手机号码",
              labelText: "手机号",
              prefixIcon: Icon(Icons.phone),
              // 未获得焦点下划线设为灰色
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              //获得焦点下划线设为蓝色
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
              ),
            ),
          ),
          TextField(
            keyboardType: TextInputType.text,
            obscureText: true,
            maxLines: 1,
            autofocus: false,
            cursorColor: Colors.blue,
            // focusNode: passwordFocusNode,
            decoration: InputDecoration(
              hintText: "请输入密码",
              labelText: "密码",
              prefixIcon: Icon(Icons.vpn_key),
              // 未获得焦点下划线设为灰色
              enabledBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.grey),
              ),
              //获得焦点下划线设为蓝色
              focusedBorder: UnderlineInputBorder(
                borderSide: BorderSide(color: Colors.blue),
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.only(top: 16.0, left: 16.0, right: 16.0),
            child: FlatButton(
              color: Colors.red,
              highlightColor: Colors.blue[700],
              colorBrightness: Brightness.dark,
              splashColor: Colors.grey,
              child: Text("登录"),
              // shape: RoundedRectangleBorder(
              //     borderRadius: BorderRadius.circular(20.0)),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => new SecondScreen(),
                  ),
                );
              },
            ),
          ),
          Container(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('没有账号？'),
                    FlatButton(
                      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      padding: EdgeInsets.all(0),
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => new Register()));
                      },
                      child: Text(
                        "前往注册",
                        style: TextStyle(color: Color(0xFFFF502E)),
                      ),
                    ),
                  ],
                ),
                FlatButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => new EditPassword(),
                      ),
                    );
                  },
                  child: Text(
                    '忘记密码？',
                    style: TextStyle(
                      color: Color(0xFFFF502E),
                    ),
                  ),
                )
              ],
            ),
            margin: EdgeInsets.only(left: 15.0),
          ),
          Container(
            child: SwitchAndCheckBoxTestRoute(),
          ),
          Container(
            child: Center(
              child: Text('其他方式登录'),
            ),
            padding: const EdgeInsets.only(top: 10.0, bottom: 30.0),
          ),
          Row(
            children: <Widget>[
              Image.asset('image/QQ.png', height: 45.0),
              Padding(padding: EdgeInsets.all(15.0)),
              Image.asset('image/weibo.png', height: 45.0),
              Padding(padding: EdgeInsets.all(15.0)),
              Image.asset('image/wechat.png', height: 45.0),
            ],
            mainAxisAlignment: MainAxisAlignment.center,
          ),
          Container(
            child: Center(
              child: FlatButton(
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => new MainPage(),
                    ),
                  );
                },
                child: Text(
                  '体验一下跳过登录',
                  style: TextStyle(color: Colors.grey[400]),
                ),
              ),
            ),
            padding: const EdgeInsets.only(top: 30.0, bottom: 30.0),
          ),
          // child: SwitchAndCheckBoxTestRoute(),
        ],
      ),
    );
  }
}

class SwitchAndCheckBoxTestRoute extends StatefulWidget {
  @override
  _SwitchAndCheckBoxTestRouteState createState() =>
      new _SwitchAndCheckBoxTestRouteState();
}

class _SwitchAndCheckBoxTestRouteState
    extends State<SwitchAndCheckBoxTestRoute> {
  bool _checkboxSelected = true; //维护复选框状态
  @override
  Widget build(BuildContext context) {
    return new Row(
      children: <Widget>[
        Checkbox(
          value: _checkboxSelected,
          activeColor: Colors.red, //选中时的颜色
          onChanged: (value) {
            setState(() {
              _checkboxSelected = value!;
            });
          },
          shape: CircleBorder(),
        ),
        Container(
          child: new Text(
            '同意用户协议与隐私政策',
            style: new TextStyle(color: Color(0xff797979)),
          ),
        ),
      ],
    );
  }
}
